<template>
    <div class="wrapper">
        <div class="header">
            <HeaderVue />
        </div>
        <div class="main">
            <div class="poem">
                <h1 class="title">每日一句</h1>
                <h2 class="subtitle">假如生活欺骗了你，不要悲伤，不要心急！忧郁的日子里须要镇静，相信吧，快乐的日子将会来临！<br><br>——作者：普希金</h2>
            </div>
            <div class="article-container">
                <div class="type-box">
                    <span>前端</span>
                    <span>后端</span>
                    <span>算法</span>
                    <span>面试</span>
                </div>
                <div class="article-list">
                    <div class="article" v-for="item in articles" :key="item._id" @click="toArticle(item._id)">
                        <div class="article-title flex">
                            <div class="title">{{ item.title }}</div>
                            <div><span v-for="tp in item.type">{{ tp }}</span></div>
                        </div>
                        <div class="article-desc">
                            Promise手写作为面试的必考题
                        </div>
                        <div class="flex icons">
                            <div class="icon ">
                                <i class="iconfont icon-chakan"></i>
                                {{ item.browseCount }}
                            </div>
                            <div class="icon" @click.stop="thumb(item._id, item.thumbCount)">
                                <i class="iconfont icon-dianzan"></i>
                                {{ item.thumbCount }}
                            </div>
                            <div class="icon">
                                <i class="iconfont icon-pinglun"></i>
                                {{ item.comments.length }}
                            </div>
                        </div>
                        <div class="delete" v-show="isAdmin">
                            <div text @click.stop="openDelete(item._id)">删除</div>
                        </div>
                    </div>
                    <div class="pagination">
                        <el-pagination background layout="prev, pager, next" :total="total"
                            @current-change="currentChange" :page-size="pageSize" />
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from '@vue/runtime-core';
import HeaderVue from '../components/Header.vue';
import { getArticles, deleteArticle, dianzan } from '../axios/index'
import { useArticleStore } from '../store/article'
import router from '../router/index'
import { useUserStore } from '../store/user';

import { ElMessage, ElMessageBox } from 'element-plus'

const userStore = useUserStore()
const account = userStore.userName

let token = computed(() => userStore.token)

const articleStore = useArticleStore()
const isAdmin = computed(() => userStore.isAdmin)
// const isAdmin = userStore.isAdmin
const pageSize = 5

let total = ref(1)
let articles = ref()

// 当前页面
const currentChange = (e: number) => {
    articles.value = articleStore.articles.slice((e - 1) * pageSize, e * pageSize)
}
// 获取首页文章列表
const getArticleList = () => {
    getArticles().then(res => {
        console.log(res);

        articleStore.setArticles(res.data.allArticles)
        articles.value = articleStore.articles.slice(0, 5)
        total.value = res.data.allArticles.length
    })
}
onMounted(() => {
    getArticleList()
})
// 跳转去文章详情
const toArticle = (hash: string) => {
    router.push(`/post?_id=${hash}`)
}
//删除文章
const openDelete = (_id: string) => {
    ElMessageBox.confirm(
        '删除这篇文章?',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            deleteArticle({ _id: _id }).then(() => {
                getArticleList()
            })
        })
        .catch(() => {
            return
        })
}

// 点赞文章
const thumb = (_id: string, thumbCount: number) => {
    //如果是登录状态
    if (token.value) {
        dianzan({ _id: _id, account: account }).then(res => {
            getArticleList()
        })
    } else {
        ElMessage({
            type: 'warning',
            message: '请登录后点赞',
        })
    }
}

//评论文章
// 模糊搜索


</script>

<style scoped>
.wrapper {
    width: 100%;
    height: 100%;
    background-color: rgb(243, 243, 243);

    overflow: hidden;
}

.header {
    width: 100%;
    margin: 0 auto;
}

.main {
    width: 1400px;
    height: 100%;
    margin: 0 auto;
    position: relative;
}

.poem {
    margin-top: 20px;
    width: 100%;
    overflow: hidden;
    display: flex;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    color: rgb(29, 172, 31);
    padding: 0 60px;
}

.poem .title {
    color: black;
    font-size: 30px;
    margin-bottom: 20px;
}

.poem .subtitle {
    color: black;
    font-size: 20px;
    font-weight: normal;
}

.article-container {

    width: 900px;
    height: 100%;
    margin: 0 auto;
    margin-top: 30px;
}

.type-box {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    margin-left: 10px;
    justify-content: start;
    gap: 20px;
}

.type-box span:hover {
    color: rgb(85, 158, 108);
    cursor: pointer;
}

.article-list {
    width: 880px;
    height: 60%;
    margin: 0 auto;
    margin-top: 10px;
    box-sizing: border-box;
    position: relative;
}

.article {
    width: 100%;
    height: 90px;
    padding-left: 5px;
    padding-top: 1px;
    margin-bottom: 10px;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 20%);
    background-color: white;
    border-radius: 5px;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
}

.article:hover {
    transition: all 0.5s;
    box-shadow: 0 0 0 2px rgba(79, 194, 239, 0.6);
}

.article-title {
    align-items: center;
    margin-top: 5px;
    margin-bottom: 15px;
}

.article-title .title {
    font-size: 22px;
    font-weight: normal;
    margin-right: 20px;
}

.article-title span {
    margin-right: 5px;
}

.article-title span:hover {
    color: rgb(63, 135, 223);
    cursor: pointer;
}

.article-desc {
    font-weight: 300;
}

.icons {
    width: 200px;
    justify-content: start;
    gap: 10px;
    margin-top: 10px;
}

.icon {
    display: flex;
    align-items: center;
    text-align: center;
    width: 100px;
}

.icon i {
    margin-right: 5px;
}

.icon:nth-child(2):hover,
.icon:nth-child(3):hover {
    color: rgb(63, 135, 223);
    cursor: pointer;
}

.pagination {
    width: 100%;
    height: 40px;
}

.delete {
    position: absolute;
    left: 300px;
    top: 68px;
}

.delete div {
    color: blue;
}

.delete div:hover {
    border-bottom: 1px solid blue;
}
</style>

<style>
.el-pagination {
    right: 0;
}
</style>
